<template>
  <!-- 留言 -->
  <div>
    <!-- 头部区域 -->
    <div class="head">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 我的毕业设计课题 </template>
          <router-link to="/mytopic">{{ topic }}</router-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 指导老师 </template>
          <router-link
            :to="{ path: '/teacherinfo', query: { id: teacher_id } }"
            >{{ teacher }}</router-link
          >
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 文本区域 -->
    <div class="content">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="你的留言" prop="message_content">
          <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入内容"
            v-model="form.message_content"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button @click="send()">发送</el-button>
  </div>
</template>
<script>
export default {
  created() {
    this.getinfo();
  },

  data() {
    return {
      topic: "",
      teacher: "",
      teacher_id: "",
      form: {
        message_content: "",
      },
      rules: {
        message_content: {
          required: true,
          message: "必填的哟",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    getinfo() {
      this.$http.get("http://127.0.0.1:8080/my/getTopic").then((res) => {
        // console.log(res);
        if (res.data.status == 0) {
          this.topic = res.data.data[1][0].topic_name;
          this.teacher = res.data.data[0][0].teacher_name;
          this.teacher_id = res.data.data[0][0].id;
        } else {
          this.topic = "";
          this.teacher = "";
        }
      });
    },

    send() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/my/postmessage",
            this.$qs.stringify(this.form)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.$message.success("发送成功");
              this.form.message_content = "";
            } else {
              this.$message.error(res.data, message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
      // console.log(ret);
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  margin: 20px 0;
}
button {
  position: absolute;
  right: 50px;
}
</style>
